<template>
  <div class="notice-detail">
    <crumbs :bread="bread">
      <template #content>
        <div class="detail">
          <div class="title">{{ dataSource.noticeTitle }}</div>
          <div class="creater">
            <div class="person">{{ dataSource.createOrg }}</div>
            <div class="date">{{ $moment(dataSource.createTime).format("YYYY-MM-DD") }}</div>
          </div>

          <div class="content" v-html="dataSource.noticeContent"></div>

          <div v-if="files.length">
            <div class="file-header">• 附件（{{ files.length }}个附件）</div>
            <div class="file" v-for="(item, idx) in files" :key="idx">
              <div class="f-icon iconfont" :class="item.cFileIcon"></div>
              <div class="f-info">
                <div>{{ item.cFileName }}</div>
                <div class="f-date-size">
                  <span>{{ item.cFileSize }}</span>
                  <span class="f-size">{{ item.cCreateTime }}</span>
                </div>
              </div>
              <div class="f-action">
                <a-button type="primary" @click="$tools.cOpen({ url: $tools.filePreview(item.fileName, item.filePath) })">预览</a-button>
                <!-- <a-button @click="$tools.cOpen({ url: item.filePath, download: true })">下载</a-button> -->
                <a-button @click="$tools.funDownload({ fileName: item.fileName, url: item.filePath })">下载</a-button>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-div">
          <end class="end">END</end>

          <div class="bottom-action">
            <div class="perv" @click="getNearby(0)">上一篇</div>
            <div class="next" @click="getNearby(1)">下一篇</div>
          </div>
        </div>
      </template>
    </crumbs>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import Crumbs from "@/components/Crumbs/index.vue";
import CContentTop from "@/components/CContentTop.vue";
import End from "@/components/End/index.vue";
import { Button } from "ant-design-vue";

@Component({
  name: "NoticeDetail",
  components: {
    Crumbs,
    CContentTop,
    End,
    AButton: Button
  }
})
export default class NoticeDetail extends Base {
  private noticeId = "";
  private dataSource: any = {};
  private nearbyLoading = false;

  private created() {
    const bread: Common.CBread[] = [{ label: "通知公告", to: { name: "Notice" } }];
    this._created(bread);
    this.noticeId = (this.$route.query.noticeId as string) || "";
    this.noticeId && this.getDetail();
  }

  private async getDetail() {
    this.$message.destroy();
    const res = await this.$api.NoticeDetail(this.noticeId);
    if (res && res.code === 200) {
      this.dataSource = res.data;
    }
  }

  private get files() {
    let _return: any[] = [];

    if (this.dataSource && this.dataSource.fileInfo) {
      _return = Array.from(this.dataSource.fileInfo, (item: any) => {
        const fileName = item.fileName.split(".");

        // item.fileName = fileName[0];
        // item.fileIcon = this.$tools.getFileIcon(fileName[1]);
        // item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD");
        // item.fileSize = this.$tools.bytesToSize(item.fileSize);

        item.cFileName = fileName[0];
        item.cFileIcon = this.$tools.getFileIcon(fileName[1]);
        item.cCreateTime = this.$moment(item.createTime).format("YYYY-MM-DD");
        item.cFileSize = this.$tools.bytesToSize(item.fileSize);

        return item;
      });
    }
    return _return;
  }

  /**
   * @param {number} type 0: 上一页 1: 下一页
   */
  private async getNearby(type: number) {
    this.$message.destroy();
    if (this.nearbyLoading) {
      return;
    }
    this.nearbyLoading = true;
    const res = await this.$api.NoticeNearby({
      noticeId: this.noticeId,
      turnPage: type
    });
    this.nearbyLoading = false;

    if (res && res.code === 200) {
      if (res.data) {
        this.$router.push({ name: "NoticeDetail", query: { noticeId: res.data.noticeId } });
      } else {
        this.$message.warning(type === 0 ? "已经是第一篇了" : "已经是最后一篇了");
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.notice-detail {
  color: #171725;
  .detail {
    .scale(padding-left, 50);
    .scale(padding-right, 50);
    padding-bottom: 120px;

    .title {
      font-size: 26px;
      font-weight: 500;
      text-align: center;
    }

    .person {
      background: url("~@/assets/images/bg-16.png") left center no-repeat;
      background-size: 15px;
    }

    .date {
      background: url("~@/assets/images/bg-17.png") left center no-repeat;
      background-size: 15px;
      .scale(margin-left, 45px);
    }
  }

  .creater {
    .scale(height, 56px);
    .scale(line-height, 56px);
    // height: 56px;
    // line-height: 56px;
    text-indent: 20px;
    color: #616060;
    font-size: 13px;
    display: flex;
    justify-content: center;
  }

  .content {
    border-top: 1px solid #ebebeb;
    padding: 20px;
  }

  .file-header {
    padding: 7px;
    background: #e8f5ff;
    border: 1px solid #b7deff;
    border-radius: 2px;
  }

  .file {
    display: flex;
    position: relative;
    padding: 9px 12px;
    align-items: center;
    border: 1px solid #ffffff;
    cursor: pointer;
    margin-top: 12px;
    font-size: 16px;
    // &:hover {
    //   background: #fafafb;
    //   border: 1px solid #eff0f1;

    //   .f-action {
    //     visibility: visible;
    //   }
    // }
  }

  .f-info {
    margin-left: 8px;
  }

  .f-date-size {
    font-size: 12px;
    color: #999999;
  }

  .f-size {
    margin-left: 16px;
    background: url("~@/assets/images/bg-18.png") right center no-repeat;
    background-size: 11px 12px;
    padding-right: 14px;
  }

  .f-icon {
    width: 32px;
    height: 32px;
    font-size: 30px;
    line-height: 100%;
  }

  .f-icon-word {
    background: url("~@/assets/images/icon-word.png") center center no-repeat;
    background-size: 100%;
  }

  .f-icon-excel {
    background: url("~@/assets/images/icon-excel.png") center center no-repeat;
    background-size: 100%;
  }

  .f-action {
    // visibility: hidden;
    // position: absolute;
    // top: 0;
    // right: 0;
    margin-left: 12px;
    color: #737278;
    display: flex;
    align-items: center;
    padding-right: 10px;

    button {
      margin-right: 16px;
    }

    // & > a {
    //   display: inline-block;
    //   line-height: 100%;
    //   padding: 8px 4px;
    //   &:hover {
    //     color: #2674d5;
    //   }
    // }
  }
  .end {
    margin: 0 auto;
  }

  .bottom-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    & > div {
      padding: 10px 20px;
      line-height: 100%;
      background: #ffffff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      margin-left: 23px;
      cursor: pointer;

      &:hover {
        color: #2674d5;
        border-color: #2674d5;
      }
    }
  }

  .bottom-div {
    .scale(padding-left, 80);
    .scale(padding-right, 80);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
  }
}
</style>
